import React from 'react';
import ReactDOM from 'react-dom';

class RecentChangesTable extends React.Component {
	constructor(props){
		super(props);
		this.state={
	      headings: ['who','when','description'],
	      changeSets:[]
	    }
	}
	

	render(){
		return (<table className="table table-bordered table-hover">
			<Headings headings={this.props.headings} />
			<Rows changeSets={this.state.changeSets} />
		</table>);
	}
	componentWillMount(){
		console.info('get /api/book');

		$.get(this.props.resource, function(result) {
      	  //var lastGist = result[0];
			console.info(result);

		   this.setState({changeSets:result,headings:['who','when','description']});
    	}.bind(this));

		 
	}

}
class Heading extends React.Component{
	render(){
		return (<th>{this.props.name}</th>);
	}
}
class Headings extends React.Component {

	render(){
		var headings = this.props.headings.map(function(name,index){
			return (<Heading name={name} key={index} />)
		})
		return (<thead><tr>{headings}</tr></thead>);
	}
}
class Row extends React.Component{
	render(){
		
		return (<tr>
			<td>{this.props.changeSet.who}</td>
			<td>{this.props.changeSet.when}</td>
			<td>{this.props.changeSet.description}</td>
		</tr>);
	}
}

class Rows extends React.Component{
	render(){

		var rows = this.props.changeSets.map(function(changeSet,index) {
			 
			return (<Row key={index} changeSet = {changeSet} />);
			 
		});
		return (<tbody>{rows}</tbody>);
	}
}
/**
RecentChangesTable.propTypes = {
 headings: React.PropTypes.Array,
 changeSets:React.PropTypes.Array,
 author:React.PropTypes.string.isRequired
};

RecentChangesTable.defaultProps ={headings:['who','when','description'],changeSets:[]}; */

RecentChangesTable.propTypes={
	 resource:React.PropTypes.string.isRequired,
	 headings:React.PropTypes.array.isRequired
	}	


RecentChangesTable.Headings = Headings 
RecentChangesTable.Rows = Rows

export default RecentChangesTable

